<template>
  <div class="home-welcome">
    <!-- 顶部 Logo 区 -->
    <header class="welcome-header">
      <div class="brand">
        <h1 class="welcome-title">轻小周 ERP</h1>
        <p class="welcome-slogan">高效 · 简洁 · 专注</p>
      </div>
      <div class="current-time">{{ formattedTime }}</div>
    </header>

    <!-- 提示卡片区 -->
    <section class="tips-container">
      <el-row :gutter="24">
        <el-col v-for="(tip, index) in tips" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
          <el-card class="tip-card" shadow="hover">
            <div class="tip-icon">{{ tip.icon }}</div>
            <div class="tip-body">
              <h3 class="tip-title">{{ tip.title }}</h3>
              <p class="tip-desc">{{ tip.content }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 页脚 -->
    <footer class="welcome-footer">
      <div class="footer-line"></div>
      <p>© 2025 轻小周ERP · 用心做好每一个细节</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const tips = [
  { icon: '💧', title: '按时喝水', content: '每工作一小时，记得起身喝口水。身体是革命的本钱！' },
  {
    icon: '🚀',
    title: '努力搞业绩',
    content: '今天的每一单，都是明天增长的基石。加油，你是最棒的！'
  },
  { icon: '🧠', title: '保持专注', content: '关闭无关通知，进入心流状态。效率翻倍，烦恼减半。' },
  { icon: '✨', title: '小步快跑', content: '不求一步登天，但求日日精进。轻小周与你同行。' }
];

const formattedTime = ref('');
let timer: number | null = null;

const updateTime = () => {
  const now = new Date();
  formattedTime.value = now.toLocaleString('zh-CN', {
    weekday: 'long',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.home-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  min-height: 100vh;
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  color: #1e1e2f;
  transition: all 0.3s ease;

  // 顶部
  .welcome-header {
    text-align: center;
    margin-bottom: 4rem;

    .welcome-title {
      font-size: 3rem;
      font-weight: 800;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      -webkit-background-clip: text;
      color: transparent;
      margin-bottom: 0.6rem;
    }

    .welcome-slogan {
      font-size: 1.2rem;
      color: #6b7280;
      margin-bottom: 1.2rem;
    }

    .current-time {
      font-size: 1rem;
      color: #9ca3af;
      letter-spacing: 0.5px;
    }
  }

  // 提示卡片
  .tips-container {
    width: 100%;
    max-width: 1080px;
  }

  .tip-card {
    border: none;
    border-radius: 20px;
    padding: 1.5rem;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
    transition: all 0.25s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
    }

    .tip-icon {
      font-size: 1.8rem;
    }

    .tip-body {
      .tip-title {
        font-weight: 700;
        font-size: 1.05rem;
        color: #4f46e5;
        margin-bottom: 0.5rem;
      }

      .tip-desc {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #4b5563;
      }
    }
  }

  // 底部
  .welcome-footer {
    margin-top: 4rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;

    .footer-line {
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, #6366f1, #8b5cf6);
      margin: 0 auto 1rem;
      border-radius: 2px;
    }
  }
}
</style>
